<template>
  <div id="employeeDetai">
    <div @click="back">返回</div>
    <el-row class="demo-avatar demo-basic">
      <el-col :span="12">
        <div class="basicMsg-icon">
          <div class="demo-basic--circle">
            <div class="block">
              <el-avatar :size="120" :src="circleUrl"></el-avatar>
            </div>
          </div>
          <div class="basicMsg-username">{{ name }}</div>
          <div>海纳百川，有容乃大</div>
        </div>
        <div class="basicMsg-text">
          <div>联系方式：{{ telephone }}</div>
          <div>状态：{{ status }}</div>
          <div>地址：{{ address }}</div>
        </div>
        <el-divider></el-divider>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  //页面载入时发送查询请求
  created() {
    var id = this.$route.query.id;
    var self = this;
    console.log(id);
    this.$axios
      .get("/waiter/findWaiterById", { params: { id } })
      .then((res) => {
        console.log(res.data.data);
        var data = res.data.data;
        this.telephone = data.telephone;
        this.status = data.status;
        this.address = data.city;
        this.name = data.realname;
      });
  },

  mounted() {},
  data() {
    return {
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      name: "name",
      telephone: "11",
      status: "22",
      address: "33",
    };
  },
  methods: {
    back() {
      this.$router.back();
    },
  },
};
</script>
<style lang='less' scoped>
#employeeDetai {
  & > div:first-child {
    color: skyblue;
    font-size: 14px;
    margin: 10px;
  }
  & > div:first-child:hover {
    cursor: pointer;
  }
}
#basicMsg {
  font-size: 14px;
  color: #333;
}
.basicMsg-username {
  font-size: 30px;
  font-weight: 600;
  margin: 20px;
}
.basicMsg-icon {
  margin-left: 150px;
  margin-top: 20px;
}
.basicMsg-text {
  margin-top: 30px;
  & > div {
    margin: 10px;
    font-size: 15px;
  }
}
</style>